<div class="app ">
	<div class="app-navigation">

		<div class="logo">Auddly</div>

		<nav data-tooltip="Dashboard" appRipple routerLink="/dashboard" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-house-simple"></i>


			</div>
			<div class="text">
				Dashboard
			</div>
		</nav>

		<nav data-tooltip="Albums" appRipple routerLink="/albums" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-disc"></i>

			</div>
			<div class="text">
				Albums
			</div>
		</nav>

		<!--nav appRipple routerLink="/artists" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-user"></i>

			</div>
			<div class="text">
				Artists
			</div>
		</nav-->

		<nav data-tooltip="Tracks" appRipple routerLink="/tracks" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-music-notes-simple"></i>

			</div>
			<div class="text">
				Tracks
			</div>
		</nav>

		<nav data-tooltip="Playlists" appRipple routerLink="/playlists" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-heart"></i>

			</div>
			<div class="text">
				Playlists
			</div>
		</nav>



		<!--nav style="margin-left: auto;" appRipple [dropdownPosition]="{
			originX: 'end',
			originY: 'bottom',
			overlayX: 'end',
			overlayY: 'top',
			offsetY: 0,
			offsetX: 0
		}" [dropdownTriggerFor]="dropdown">
			<div class="icon">
				<i class="ph-user-circle"></i>
			</div>
			<app-dropdown #dropdown>

				<div class="dropdown-item" appRipple routerLink="/settings" [routerLinkActive]="['active']">
					Settings
					<i class="ph-gear-six"></i>


				</div>
				<div class="divider no-margin"></div>

				<div (click)="theme.onToggle()" class="dropdown-item">
					<app-theme-toggle style="display: none;" #theme></app-theme-toggle>
					{{ theme.themeService.theme === 'dark' ? 'Light' : 'Dark' }}

					<i *ngIf="theme.themeService.theme === 'dark'" class="ph-sun-dim"></i>
					<i *ngIf="theme.themeService.theme !== 'dark'" class="ph-moon"></i>
				</div>

			
				<div class="divider no-margin"></div>

		
				<div class="dropdown-item">Logout <i class="ph-sign-out"></i>
				</div>
			</app-dropdown>

		</nav-->

		<div style="margin-left: auto;">
			<app-now-playling [mini]="true"></app-now-playling>

		</div>

		<nav data-tooltip="Show Queue" appRipple (click)="onQueue()">
			<div class="icon">
				<i class="ph-queue"></i>
			</div>
			<div class="text">
				Queue
			</div>
		</nav>

	</div>


	<div class="app-controls ">
		<app-now-playling></app-now-playling>
	</div>

	<div class="app-content">
		<router-outlet></router-outlet>
	</div>


</div>



<!--div class="app">
	<div class="app-navigation">
		<div class="logo">
			<h3>Auddly.</h3>
		</div>
		<div class="app-navigation-item" appRipple routerLink="/dashboard" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-house-simple"></i>

			</div>
			<div class="text">
				Dashboard
			</div>
		</div>

		<div class="app-navigation-item" appRipple routerLink="/search" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-magnifying-glass"></i>


			</div>
			<div class="text">
				Search
			</div>
		</div>

		<div class="app-navigation-item" appRipple routerLink="/albums" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-disc"></i>

			</div>
			<div class="text">
				Albums
			</div>
		</div>
		<div class="app-navigation-item" appRipple routerLink="/artists" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-user"></i>

			</div>
			<div class="text">
				Artists
			</div>
		</div>

		<div class="app-navigation-item" appRipple routerLink="/tracks" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-music-notes-simple"></i>

			</div>
			<div class="text">
				Tracks
			</div>
		</div>

		<div class="app-navigation-item" appRipple routerLink="/playlists" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-heart"></i>
			</div>
			<div class="text">
				Playlists
			</div>
		</div>




		<div class="app-navigation-item" appRipple routerLink="/queue" [routerLinkActive]="['active']">
			<div class="icon">
				<i class="ph-queue"></i>


			</div>
			<div class="text">
				Queue
			</div>
		</div>



		<div class="app-navigation-item" style="margin-top: auto;" appRipple [dropdownPosition]="{
			originX: 'end',
			originY: 'bottom',
			overlayX: 'end',
			overlayY: 'top',
			offsetY: 0,
			offsetX: 0
		}" [dropdownTriggerFor]="dropdown">
			<div class="icon">
				<i class="ph-user-circle"></i>
			</div>
			<div class="text">
				Settings
			</div>

		</div>

	</div>

	<div class="app-content">
		<router-outlet></router-outlet>
	</div>

	<div class="app-player">
		<app-now-playling></app-now-playling>

	</div>
</div>
<app-dropdown #dropdown>

	<div class="dropdown-item" appRipple routerLink="/settings" [routerLinkActive]="['active']">
		Settings
		<i class="ph-gear-six"></i>


	</div>
	<div class="divider no-margin"></div>

	<div (click)="theme.onToggle()" class="dropdown-item">
		<app-theme-toggle style="display: none;" #theme></app-theme-toggle>
		{{ theme.themeService.theme === 'dark' ? 'Light' : 'Dark' }}

		<i *ngIf="theme.themeService.theme === 'dark'" class="ph-sun-dim"></i>
		<i *ngIf="theme.themeService.theme !== 'dark'" class="ph-moon"></i>
	</div>


	<div class="divider no-margin"></div>


	<div class="dropdown-item">Logout <i class="ph-sign-out"></i>
	</div>
</app-dropdown>


<app-dropdown #libraryMenu>

	<div class="dropdown-item" appRipple routerLink="/albums" [routerLinkActive]="['active']">
		<span>Albums</span>
		<i class="ph-disc"></i>



	</div>
	<div class="divider no-margin"></div>
	<div class="dropdown-item" appRipple routerLink="/artists" [routerLinkActive]="['active']">
		<span>Artists</span>
		<i class="ph-user"></i>


	</div>
	<div class="divider no-margin"></div>

	<div class="dropdown-item" appRipple routerLink="/playlists" [routerLinkActive]="['active']">
		<span>Playlists</span>
		<i class="ph-queue"></i>


	</div>
	<div class="divider no-margin"></div>
	<div class="dropdown-item" appRipple routerLink="/tracks" [routerLinkActive]="['active']">
		<span>Tracks</span>
		<i class="ph-music-notes-simple"></i>


	</div>
	<app-now-playling></app-now-playling>

</app-dropdown>-->